<template>
  <view class="container">
    <!-- 表单区域 -->
    <view class="form-container">
			
			<uni-section title="订单名称" type="line" padding>
				<uni-easyinput class="item-input" type="text" disabled v-model="form.orderName">
				</uni-easyinput>
			</uni-section>
			
			<uni-section title="订单流水号" type="line" padding>
				<uni-easyinput class="item-input" type="text" disabled v-model="form.orderId">
				</uni-easyinput>
			</uni-section>

      <uni-section title="环节名称" type="line" padding>
				<uni-easyinput class="item-input" type="text" disabled v-model="form.linkName">
				</uni-easyinput>
      </uni-section>
			
			<uni-section title="剩余数量" type="line" padding>
				<uni-easyinput class="item-input" type="text" disabled v-model="form.residueNumber">
				</uni-easyinput>
			</uni-section>
			
			<uni-section title="审批人" type="line" padding>
				<uni-easyinput class="item-input" type="text" disabled v-model="form.auditor">
				</uni-easyinput>
			</uni-section>
			
			<uni-section v-if="form.linkName == '喷漆'" title="喷漆类型" type="line" padding>
				<uni-data-select
					v-model="form.paintFlag"
					:localdata="paintOp"
					placeholder="请选择喷漆类型"
				></uni-data-select>
			</uni-section>
			
<!-- 			<uni-section v-if="form.linkName == '穿线' || form.linkName == '紧线'" title="穿线状态" type="line" padding>
				<uni-data-select
					v-model="form.wireFlag"
					:localdata="wireOp"
					placeholder="请选择穿线类型"
				></uni-data-select>
			</uni-section> -->
			
			<uni-section title="已完成数量" type="line" padding>
				<uni-easyinput class="item-input" type="number" placeholder="请输入已完成数量" v-model="form.inputNumber">
				</uni-easyinput>
			</uni-section>

      
      <button class="submit-btn" @click="submitForm">提交审批</button>
    </view>
  </view>

 
</template>

<script>
import request from '/utils/request.js';
import { isEmpty } from '/utils/utils.js'

export default {

  data() {
    return {
			isSubmit: false,
			form: {
				linkName: '',
				linkId: '',
				orderName: '',
				orderId: '',
				residueNumber: '',
				auditor: '',
				inputNumber: '',
				paintFlag:'',
				wireFlag:'',
				status:'1', //1待审核 2不合格 3合格
			},
			id: '',
			paintOp: [
				{ value: 0, text: "色漆" },
				{ value: 1, text: "底漆" },
				{ value: 2, text: "精油" },
			], //喷漆
			wireOp: [
				{ value: 0, text: "放出" },
				{ value: 1, text: "收回" },
			], //穿线
    }
  },
	onLoad(options) {
		this.form.linkName = options.linkName
		this.form.linkId = options.linkId
		this.form.orderName = options.orderName
		this.form.orderId = options.orderId
		this.form.residueNumber = options.residueNumber
		this.form.auditor = options.auditor
	},
  methods: {
    goBack() {
      uni.navigateBack()
    },

    // 提交表单
    submitForm() {
			if (this.isSubmit) {
				return
			}
      // 表单验证
      if (isEmpty(this.form.inputNumber)) {
        uni.showToast({
          title: '请输入已完成数量',
          icon: 'none'
        })
        return
      }
			
			if (this.form.inputNumber*1 > this.form.residueNumber*1) {
				uni.showToast({
				  title: '该环节已达到最大总数量,请再次确认输入的完成数量',
				  icon: 'none'
				})
				return
			}

      // 提交表单逻辑
      uni.showLoading({
        title: '提交中...'
      })

      let params = {
        ...this.form
      }
      request.post('/system/operation', params).then(res => {
        uni.hideLoading()
        if (res.code === 200) {
         uni.showToast({
           title: '操作成功',
           icon: 'success',
           duration: 1500, // 显示2秒
         });
         this.isSubmit = true
         // 等待提示框显示完成后再跳转
         setTimeout(() => {
           uni.switchTab({
             url: `/pages/tabBar/index/index`
           });
         }, 1500);
					// 跳转到环节列表页
					// uni.navigateTo({
					//   url: `/pages/workorder/myBacklog`
					// })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
      
    },
  }
}
</script>

<style>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
}

/* 导航栏样式 */
.navbar {
  height: 100rpx;
  background-color: #007AFF;
  color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.navbar-back {
  position: absolute;
  left: 30rpx;
  width: 60rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
}

.back-icon {
  width: 24rpx;
  height: 40rpx;
}

.navbar-title {
  width: 100%;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
}

/* 表单区域 */
.form-container {
  padding: 30rpx;
}


.item-input {
  font-size: 28rpx;
  height: 60rpx;
  color: #666;
}

.submit-btn {
  background-color: #007AFF;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  border-radius: 45rpx;
  font-size: 32rpx;
  margin-top: 50rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 122, 255, 0.3);
}

</style>    